"use client";
import React, { useState } from "react";
import { Table, Modal, Space, Tag, Switch, Button } from "antd";
import Layout from "@/components/Layout";
import type { TableProps } from "antd";
import Myform from "./myform";
import { data } from "./data";

export default function Likaile() {
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
    collect: boolean;
  }
  let [newdata, setdata] = useState(data);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "名称",
      dataIndex: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "详情",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "标签",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "状态",
      dataIndex: "collect",
      render: (collect, record) => {
        return (
          <Switch
            checked={collect}
            onChange={() => {
             let obj= newdata.map((item) => {
                if (item.key == record.key) {
                  item.collect = !item.collect;
                }
                return item
              });
              setdata(obj);
            
            }}
          />
        );
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            onClick={() => {
              setIsModalOpen(true);
              settitle("编辑");
              setobj(record);
            }}
          >
            编辑
          </Button>
          <Button
            type="primary"
            danger
            onClick={() => {
              console.log(newdata.filter((item) => item.key !== record.key));

              setdata(newdata.filter((item) => item.key !== record.key));
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  //   const data: DataType[] = [
  //     {
  //       key: "1",
  //       name: "John Brown",
  //       age: 32,
  //       address: "New York No. 1 Lake Park",
  //       tags: ["nice", "developer"],
  //       collect: false,
  //     },
  //     {
  //       key: "2",
  //       name: "Jim Green",
  //       age: 42,
  //       address: "London No. 1 Lake Park",
  //       tags: ["loser"],
  //       collect: true,
  //     },
  //     {
  //       key: "3",
  //       name: "Joe Black",
  //       age: 32,
  //       address: "Sydney No. 1 Lake Park",
  //       tags: ["cool", "teacher"],
  //       collect: false,
  //     },
  //   ];

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, settitle] = useState("新增");
  const [itemobj, setobj] = useState({});

  const showModal = () => {
    setIsModalOpen(true);
    settitle("新增");
    setobj({});
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <Layout curActive="/likaile">
      <main>
        <div>
          <Button type="primary" onClick={showModal}>
            新增
          </Button>
          <Modal
            title={title}
            open={isModalOpen}
            footer={null}
            onOk={handleOk}
            onCancel={handleCancel}
          >
            <Myform
              setIsModalOpen={setIsModalOpen}
              title={title}
              itemobj={itemobj}
              key={new Date().getTime()}
            />
          </Modal>
          <h3>李凯乐</h3>
          <Table<DataType>
            pagination={{ defaultPageSize: 5 }}
            columns={columns}
            dataSource={newdata}
          />
        </div>
      </main>
    </Layout>
  );
}
